<template>
    <el-container style="height: 100%; border: 1px solid #eee;">
        <el-aside :width="aside_width" style="background-color: rgb(238, 241, 246)">
            <Aside :isCollapse="isCollapse"></Aside>
        </el-aside>

            <el-container style="height: 100%;">
                <el-header style="text-align: right; font-size: 12px">
                    <Header @doCollapse="doCollapse" :aside_icon="aside_icon"></Header>
                </el-header>

                <el-main style="height: 100%;">
                    <!--                <Main></Main>-->
                    <router-view/>
                </el-main>
            </el-container>

    </el-container>
</template>

<script>

    import Aside from "@/components/Aside";
    import Header from "@/components/Header";
    import Login from "@/components/Login";
    import Home from "@/components/Home";

    export default {
        name: "Index",
        components: {Home, Login, Header,Aside},
        data(){
            return{
                isCollapse: false,
                aside_width: '200px',
                aside_icon: 'el-icon-s-fold'
            }
        },
        methods:{
            doCollapse(){
                this.isCollapse = !this.isCollapse

                if (!this.isCollapse){ //展开

                    this.aside_width = '200px',
                    this.aside_icon = 'el-icon-s-fold'

                }else {//收起

                    this.aside_width = '65px',
                    this.aside_icon = 'el-icon-s-unfold'

                }
            }
        }


    };
</script>

<style scoped>
    .el-header {
        background-color: #cebdee;
        color: #333;
        line-height: 60px;
    }

    .el-main{
        padding: 5px;
    }

    .el-aside {
        color: #333;

    }
</style>